// https://www.jianshu.com/p/bc173a3fdf3a 路由切换动画
// https://blog.csdn.net/weixin_33964094/article/details/91456433 路由切换动画
// AnimatedSwitch.js
// 动画组件
import { TransitionGroup, CSSTransition } from "react-transition-group";
// react 路由跳转处理
import { Route, Switch } from "react-router-dom";
// 动画养样式
import "./AnimatedSwitch.scss";

const AnimatedSwitch = (props) => {
  const { children } = props;
  return (
    <Route
      render={({ location }) => (
        <TransitionGroup>
          <CSSTransition
            key={location.pathname}
            classNames={props.type || "fade"}
            timeout={props.duration || 300}
          >
            <Switch location={location}>
              {children}
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      )}
    />
  );
};

export default AnimatedSwitch;
